<template>
  <el-card>
    <div slot="header" class="clearfix flex">
      <b class="header-title">阀门列表</b>
      <el-button
        v-if="childSelected.length > 0"
        type="primary"
        size="mini"
        class="mlauto"
        icon="el-icon-s-operation"
        @click="showControlContainer"
      >控制选中</el-button>
    </div>
    <div class="childs-container">
      <dl
        v-for="(item,index) in currentDevice.devices.filter(val => {return +val.product_type === dclassCodeMap.fm})"
        :key="index"
        class="menux"
        @click="selectItem(item)"
      >
        <dt><img :src="getDeviceImage(item)" alt=""></dt>
        <dd>{{ item.name }}</dd>
      </dl>
    </div>
    <el-dialog
      v-el-drag-dialog
      title="阀门控制"
      :append-to-body="true"
      destroy-on-close
      :visible.sync="dialogVisible"
      width="640px"
      @close="dialogClose"
    >
      <div class="tags">
        <el-tag
          v-for="(item,index) in childSelected"
          :key="index"
          closable
          type="primary"
          style="margin:8px 8px 8px 0;"
          @close="closeTag(index)"
        >
          {{ item.name }}
        </el-tag>
      </div>
      <div class="h20" />
      <el-form>
        <el-form-item label="控制时长">
          <el-input
            v-model="RunTime"
            placeholder="控制时长"
            type="number"
            style="width:150px;margin-right:12px;"
          >
            <template slot="append">分钟</template>
          </el-input>
          <el-radio-group v-model="RunTime">
            <el-radio-button
              v-for="(item,index) in runtimes"
              :key="index"
              :label="item.value"
            >{{ item.text }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="btn-container">
        <el-button type="primary" size="small" icon="el-icon-caret-right" @click="control(1)">打开</el-button>
        <el-button type="danger" size="small" icon="el-icon-switch-button" @click="control(0)">关闭</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { dclassMap, dclassCodeMap } from '@/utils/constant'
import { selectable } from '@/utils/selectable'
import { uniqueArr } from '@/utils'
import { runtimes } from '@/utils/constant'
import { getDeviceStatus, getDeviceImage } from '@/utils/device'
import elDragDialog from '@/directive/el-drag-dialog'
import { startHanterDrip, stopHanterDrip } from '@/api/device'
export default {
  directives: { elDragDialog },
  data() {
    return {
      dclassMap,
      dclassCodeMap,
      childSelected: [],
      dialogVisible: false,
      runtimes,
      RunTime: 1
    }
  },
  computed: {
    ...mapGetters(['currentDevice'])
  },
  watch: {
    currentDevice: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          selectable('childs-container', 'menux', (list, dom) => {
            this.childSelected = []
            list.forEach((item, index) => {
              this.childSelected.push(newVal.devices.filter(val => { return +val.product_type === dclassCodeMap.fm })[item])
            })
            this.childSelected = uniqueArr(this.childSelected)
          })
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getDeviceStatus(item) {
      return getDeviceStatus(item)
    },
    getDeviceImage(item) {
      return getDeviceImage(item)
    },
    selectItem(item) {
      this.childSelected = [item]
      this.dialogVisible = true
    },
    showControlContainer() {
      this.dialogVisible = true
    },
    control(value) {
      this.$confirm('确定要执行此操作吗？', '操作提醒', { type: 'warning' }).then(res => {
        if (value === 1) {
          this.childSelected.forEach((item, index) => {
            const action = {
              Runtime: this.RunTime * 60,
              Station: +item.idx,
              url: 'StartStation'
            }
            startHanterDrip(action).then(res => {
              if (index === this.childSelected.length - 1) {
                this.$message({ message: res.msg, type: 'success', showClose: true })
              }
            })
          })
        } else {
          stopHanterDrip().then(res => {
            this.$message({ message: res.msg, type: 'success', showClose: true })
          })
        }
      })
    },
    closeTag(index) {
      if (this.childSelected.length === 1) {
        this.$message({ message: '最少需要保留一个控制单元', type: 'error', showClose: true })
      } else {
        this.childSelected.splice(index, 1)
      }
    },
    dialogClose() {
      this.childSelected = []
    }
  }
}
</script>

<style lang="scss" scoped>
.childs-container{
  max-height:232px;
  overflow-y:scroll;
}
</style>
